{{ define "admin" }}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="{{ .StaticPath }}/index.css">
	<style>
		html,body,#app{
			height: 100%;
			width: 100%;
		}
	</style>
</head>

<body>
	<div id="app">
	<el-tabs tab-position="left">
		<el-tab-pane><span slot="label">
            <el-tooltip class="item" effect="dark" content="查看访问记录【/who】" placement="right">
                <i class="el-icon-s-custom"></i> 
            </el-tooltip></span>
			 <el-table
                :data="whoData.slice((whocurrentPage-1)*pagesize,whocurrentPage*pagesize)"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="序号">
                </el-table-column>
                <el-table-column
                    prop="remoteaddr"
                    label="访客连接">
                </el-table-column>
                <el-table-column
                    prop="path"
                    label="访问路径">
                </el-table-column>
                <el-table-column
                    prop="created"
                    label="访问时间">
                </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 30px;">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="whototal"
                    :page-sizes="[5,10, 15, 20]"
                    :page-size="pagesize"
                    @size-change="whohandleSizeChange"
                    @current-change="whocurrent_change">
                </el-pagination>
            </div>
		</el-tab-pane>
		<el-tab-pane><span slot="label">
            <el-tooltip class="item" effect="dark" content="查看操作记录【/check】" placement="right">
                <i class="el-icon-s-data"></i> 
            </el-tooltip></span>
			<el-table
                :data="checkData.slice((checkcurrentPage-1)*pagesize,checkcurrentPage*pagesize)"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="序号">
                </el-table-column>
                <el-table-column
                    prop="pid"
                    label="PID">
                </el-table-column>
                <el-table-column
                    prop="remoteaddr"
                    label="访客连接">
                </el-table-column>
                <el-table-column
                    prop="command"
                    label="命令">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-button type="success" circle size="mini" icon="el-icon-check" v-if="scope.row.status === 'success'"></el-button>
                        <el-button type="danger" circle size="mini" icon="el-icon-close" v-else></el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="token"
                    label="TOKEN">
                </el-table-column>
                <el-table-column
                    prop="created"
                    label="创建时间">
                </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 30px;">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="checktotal"
                    :page-sizes="[5,10, 15, 20]"
                    :page-size="pagesize"
                    @size-change="checkhandleSizeChange"
                    @current-change="checkcurrent_change">
                </el-pagination>
            </div>
		</el-tab-pane>
		<el-tab-pane><span slot="label"><el-tooltip class="item" effect="dark" content="监控信息【/metrics】" placement="right">
                <i class="el-icon-monitor"></i> 
            </el-tooltip></span>
			<iframe src="{{ .Metrics }}" ref="iframe" width="100%" :height="clientHeight" frameborder="0" scrolling="yes"></iframe>
		</el-tab-pane>
        <!--el-tab-pane><span slot="label"><el-tooltip class="item" effect="dark" content="小窗口【/】" placement="right">
                <i class="el-icon-view"></i> 
            </el-tooltip></span>
			<iframe src="/" ref="iframe" width="100%" :height="clientHeight" frameborder="0" scrolling="yes"></iframe>
		</el-tab-pane-->
        <el-tab-pane><span slot="label"><el-tooltip class="item" effect="dark" content="全屏显示【/】" placement="right">
                <i class="el-icon-full-screen" @click="full"></i> 
            </el-tooltip></span>
		</el-tab-pane>
	</el-tabs>
	</div>
</body>
	<!-- import Vue before Element -->
	<script src="{{ .StaticPath }}/vue.js"></script>
	<!-- import JavaScript -->
	<script src="{{ .StaticPath }}/index.js"></script>
	<script>
	new Vue({
		el: '#app',
		data: function() {
			return { 
				visible: false,
				drawer: false,
				isCollapse: true,
				whoData: [],
                checkData: [],
				clientHeight: document.documentElement.clientHeight - 20,
                whototal: 0,
                pagesize:10,
                whocurrentPage:1,
                checktotal: 0,
                checkcurrentPage: 1
			}
		},
		mounted() {
			let self = this;
			window.onresize = function () {
				self.clientHeight = document.documentElement.clientHeight - 20
			}
			window.onresize()

            this.getWho()
            this.getCheck()
		},
		methods: {
            full() {
                window.location.href = "/"
            },
            getWho() {
                fetch({{ .Who }}).then((response) => {
                    return response.json()
                }).then((json) => {
                    this.whoData = json
                    this.whototal = this.whoData.length
                })
            },
            getCheck() {
                fetch({{ .Check }}).then((response) => {
                    return response.json()
                }).then((json) => {
                    console.log(json)
                    this.checkData = json
                    this.checktotal = this.checkData.length
                })
            },
            whohandleSizeChange (val) {
                this.pagesize = val
            },
            whocurrent_change:function(currentPage){
                this.whocurrentPage = currentPage;
            },
            checkhandleSizeChange (val) {
                this.pagesize = val
            },
            checkcurrent_change:function(currentPage){
                this.checkcurrentPage = currentPage;
            },
			handleOpen(key, keyPath) {
			  console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
			  console.log(key, keyPath);
			}
		}
	})
	</script>
</html>
{{ end }}